<template>
    <div class="box-group-wrap">
        <p class="title">
            <span style="width: 65px;">催收信息</span>
            <span class="showmore" @click="showHistoryMore">查看更多</span>
        </p>
        <!-- <div class="line"></div> -->
        <div v-if="tableData.length === 0" class="nodatalist">
            <img src="@/assets/img/khindex/nuMessage.png" alt width="40px" />
            <p>暂无信息</p>
        </div>

        <div v-else class="trainingMain">
            <el-scrollbar wrap-class="side-bar-scrollbar-wrap">
                <ul>
                    <li v-for="(item,index) in tableData" :key="index">
                        <i
                            class="trainingServe"
                            :title="item.ACT_TYPE_COMMENT"
                            style="width: 35%;"
                        >{{item.ACT_TYPE_COMMENT}}</i>
                        <i
                            class="trainingServe"
                            :title="item.CUST_NM"
                            style="width: 30%;"
                        >{{item.CUST_NM}}</i>
                        <i
                            class="trainingServe"
                            :title="item.ACT_CLASS"
                            style="width: 30%;"
                        >{{item.ACT_CLASS}}</i>
                        <!-- <i
                            class="trainingServe"
                            :title="item.ACT_RET"
                            style="width: 25%;"
                        >{{item.ACT_RET}}</i>-->
                    </li>
                </ul>
            </el-scrollbar>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="dialogFlag"
            append-to-body
            center
            width="1200px"
        >
            <div slot="title">催收信息</div>
            <el-table :data="tableData" width="100%" stripe border class="heard-bg">
                <el-table-column label="催收号码" prop="ACT_TYPE_COMMENT" show-overflow-tooltip></el-table-column>
                <el-table-column label="催收姓名" prop="CUST_NM" show-overflow-tooltip></el-table-column>
                <el-table-column label="催收对象关系" prop="CON_REL_NOTE" show-overflow-tooltip></el-table-column>
                <el-table-column label="催收类型" prop="ACT_CLASS" show-overflow-tooltip></el-table-column>
                <el-table-column label="催收结果" prop="ACT_RET" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    name: "csinfos",
    data() {
        return {
            tableData: [],
            dialogFlag: false
        };
    },
    computed: {
        ...mapGetters([
            'customerInfo_3002',
            'cardInfo_3004',
            'defaultParams',
        ]),
    },
    mounted() {
        this.getInitData();
    },
    methods: {
        // 获取工单表格数据
        async getInitData() {
            // 设置请求参数 -- 0001 交易
            console.log("催收查询条件：", this.cardInfo_3004.CUSTID);
            if (this.cardInfo_3004.CUSTID != '' && this.cardInfo_3004.CUSTID != undefined) {
                const appBody = {
                    custNbr: this.cardInfo_3004.CUSTID, // 证件类型
                    //custNbr: '342626197601094451', 342626197601094451
                    bankCode: '6440', // 起始日期
                };
                const params = JSON.parse(JSON.stringify(this.defaultParams));
                params.body.appHead.tranCode = '1001';
                params.body.appBody = appBody;

                // 跑 00001交易
                this.$post.common.collectionTran(params).then(async (res) => {
                    this.pageLoading = false;
                    if (res.status === 200) { // 接口请求成功
                        // 
                        this.isShowView = false;
                        const result = JSON.parse(res.data.jsonRes);
                        console.log(result, 'result -- 1001');
                        if (result.sysHead.rspCd === '000000') {
                            const list = result.body.appBody.data.content || [];
                            this.tableData = list;
                            console.log("催收信息列表：", this.tableData);
                        }
                    }
                });
            }
        },
        showHistoryMore() {
            this.dialogFlag = true
            console.log('更多');
        }
    }
};
</script>


<style scoped lang="scss">
.trainingMain {
    .HistortTime {
        float: right;
        margin-right: 15px;
    }
    .side-bar-scrollbar-wrap {
        max-height: 150px;
    }
}

.trainDate {
    width: 31%;
}
.telzt {
    width: 20%;
}
.traintime {
    width: 44%;
}
.pagination {
    margin-top: 20px;
    text-align: right;
}
.showmore:hover {
    cursor: pointer;
}
</style>
